{% extends 'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block css %}


    <style>
        /*****************************底 部 开 始*****************************/
        /*media all*/

        a {
            color: #333;

        }

        .footer p {
            font-size: 12px;
            line-height: 25px;
            color: #525252;
            text-align: center;
        }

        .footer {
            width: 100%;
            height: 100px;
            margin-top: 30px;
            background-color: #eaeaea;
        }

        .service-intro {
            width: 100%;
            border-top: 1px solid #b2dfdb;
        }

        .servece-type-info ul {
            list-style: none;
        }

        .servece-type-info li {
            font-size: 14px;
            cursor: pointer;
            line-height: 26px;
        }

        .servece-type-info li:first-child {
            font-size: 16px;
            line-height: 28px;
            font-weight: bold;
        }

        .friend-link {
            display: flex;
            align-items: center;
            width: 908px;
            height: 30px;
            margin: 0px auto;
            color: #666;
            border-top: 1px solid #b2dfdb;
        }

        .friend-link-item {
            margin: 0px auto;
        }

        .friend-link-item ul {
            list-style: none;
        }

        .friend-link-item li {
            padding: 5px 0px;
            float: left;
        }

        .link-item {
            padding: 0px 8px;
            cursor: pointer;
            border-right: 1px solid #ccc;
        }

        .link-last-item {
            border: none;
        }

        .copyright a {
            color: #232323;
            font-size: 20px;
        }

        /*****************************底 部 结 束*****************************/
    </style>
{% endblock %}
{% block middle %}
    {% csrf_token %}
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md3">
            <div class="grid-demo grid-demo-bg1">
                <div class="list-group">
                    <li href="#" class="list-group-item active">
                        最新新闻
                    </li>
                    <a href="#" class="list-group-item">李志飞：碎片化、多终端的未来交互生态下 智能手机会被替代吗？</a>
                    <a href="#" class="list-group-item">不会衰老，不得癌症？神奇动物在这里！</a>
                    <a href="#" class="list-group-item">抗癌“神药”能治75％癌症？科技日报：只针对一种罕见基因突变</a>
                    <a href="#" class="list-group-item">宝宝树王怀南：从未被高估 母婴垂直电商难独立持续</a>
                    <a href="#" class="list-group-item">非洲手机三季度报告：中国传音位居龙头 获得35%的市场份额</a>
                    <a href="#" class="list-group-item">韩国检方起诉11名涉嫌窃取三星技术的人员</a>
                    <a href="#" class="list-group-item">淘宝启动双12 沪穗蓉8城可享“两小时达”服务</a>
                    <a href="#" class="list-group-item">特斯拉官宣：Autopilot行驶里程突破16亿公里</a>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="grid-demo">
                {% for act in acts %}
                    <div class="media" style="padding: 10px 0 0 0">
                        <h3 class="media-heading">{{ act.title }}</h3>
                        <div class="media-body" style="text-indent:30px">
                            {{ act.desc }}
                        </div>
                        <div style="margin-top: 5px" class="pull-left">
                            <span style="color:dimgrey;font-size: 10px">负责社团：{{ act.pl_obj.club }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span style="color:dimgrey;font-size: 10px">负责人：{{ act.pl_obj.user_obj.name }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span style="color:dimgrey;font-size: 10px">地点：{{ act.place }}</span>
                            <br>
                            <span style="color:dimgrey;font-size: 10px">报名时间：{{ act.enroll_starttime }} ～ {{ act.enroll_endtime }}</span>
                            <br>
                            <span style="color:dimgrey;font-size: 10px">活动时间：{{ act.act_starttime }} ～ {{ act.act_endtime }}</span>
                        </div>
                        <button class="layui-btn layui-btn-normal pull-right sign_up"  club="{{ act.id }}">报名
                        </button>
                    </div>
                    <hr style="margin: 10px 0 10px 0">
                {% endfor %}
                <div id="page"></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo grid-demo-bg1">
                <div class="list-group">
                    <li href="#" class="list-group-item active">
                        最新新闻
                    </li>
                    <a href="#" class="list-group-item">李志飞：碎片化、多终端的未来交互生态下 智能手机会被替代吗？</a>
                    <a href="#" class="list-group-item">不会衰老，不得癌症？神奇动物在这里！</a>
                    <a href="#" class="list-group-item">抗癌“神药”能治75％癌症？科技日报：只针对一种罕见基因突变</a>
                    <a href="#" class="list-group-item">宝宝树王怀南：从未被高估 母婴垂直电商难独立持续</a>
                    <a href="#" class="list-group-item">非洲手机三季度报告：中国传音位居龙头 获得35%的市场份额</a>
                    <a href="#" class="list-group-item">韩国检方起诉11名涉嫌窃取三星技术的人员</a>
                    <a href="#" class="list-group-item">淘宝启动双12 沪穗蓉8城可享“两小时达”服务</a>
                    <a href="#" class="list-group-item">特斯拉官宣：Autopilot行驶里程突破16亿公里</a>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <footer class="footer">
            <div class="clearfix"></div>
            <div class="service-intro">
                <div class="friend-link">
                    <div class="friend-link-item">
                        <ul>
                            <li>
                                <span class=" link-item link-last-item">
                                    <a style="text-decoration: none;" title="浙江省教育厅" href="http://www.zjedu.gov.cn/">浙江省教育厅</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                    <a style="text-decoration: none;" title="信息公开"
                                       href="http://xxgk.zjnu.edu.cn/">信息公开</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                    <a style="text-decoration: none;" title="书记信箱"
                                       href="http://office.zjnu.edu.cn/mail.aspx?id=sj">书记信箱</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                    <a style="text-decoration: none;" title="校长信箱"
                                       href="http://office.zjnu.edu.cn/mail.aspx?id=xz">校长信箱</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                    <a style="text-decoration: none;" title="本科招生"
                                       href="http://zs.zjnu.edu.cn/">本科招生</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                      <a style="text-decoration: none;" title="留学生招生" href="http://iso.zjnu.edu.cn/">留学生招生</a>
                                </span>
                            </li>
                            <li>
                                <span class="link-item link-last-item">
                                      <a style="text-decoration: none;" title="研究生招生" href="http://yzw.zjnu.edu.cn/">研究生招生</a>
                                </span>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
        </footer>
        <div class="" style="text-align: center">
            <p>地址：浙江省金华市迎宾大道688号 邮编:321004
                浙ICP备05001954号 E-Mail: webserver@zjnu.cn </p>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script>
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: {{ acts.count }} //数据总数，从服务端得到
            });

        });
        layui.use('layer', function () {
            var layer = layui.layer;

            $('.sign_up').click(function () {
                var abc = '{{ request.user }}'
                if (abc == 'AnonymousUser') {
                    location.href = '/login/'
                }
                else {
                    club_id = $(this).attr('club')
                    layer.confirm('确定报名吗', function (index) {
                        var da = {
                            'id': club_id,
                            'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                        }
                        if (index) {
                            $.ajax({
                                url: '/sign_up/',
                                type: 'post',
                                data: da,
                                success: function (data) {
                                    alert(data.msg)
                                }
                            })
                        }
                        layer.close(index);
                    });
                }

            })
        });
    </script>
{% endblock %}